<!DOCTYPE HTML> 
<html>
 <head>
  <meta charset="UTF-8"/>
  <title>RIGHT: R Interactive Graphics via HTml</title>
  <link rel="stylesheet" href="right.css"/>
 </head>
 <body>
  <script src="kinetic-v4.5.4.js"></script>
  <script src="structure.js"></script>
  <script src="common.js"></script>
  <script src="scatter.js"></script>
  <script src="hist.js"></script>
  <script src="box.js"></script>
  <script src="node_event.js"></script>
  <script>createMainStructure('diamonds-from-R_1K.csv');</script>
  <div id="head">
   <div class="wrap">
    <script src="search.js"></script>
    <form id="searchForm1">
     <input type="text" id="searchBox" name="searchId" placeholder="Please input boolean statement..." onkeydown="if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {booleanSearch(searchForm1);  printAns(); return false;}};"></input>
     <a id="searchBtn" href="#" class="myButton" onClick="booleanSearch(searchForm1); printAns(); return false;">Search</a>
     <a id="clearBtn" href="#" class="myButton" onClick="clearSearchBox(); return false;">Clear</a>
     <a id="showTable" href="#" class="myButton" onClick="return false;">Show Table</a>
     <a id="hideTable" href="#" class="myButton" onClick="return false;">Hide Table</a>
    </form>
   </div>
  </div>
  <div id="content">
   <div id="scatterContainer1" oncontextmenu="return false;"></div>
   <div id="scatterContainer2" oncontextmenu="return false;"></div>
   <div id="histContainer3" oncontextmenu="return false;"></div>
   <div id="histContainer4" oncontextmenu="return false;"></div>
   <div id="boxContainer5" oncontextmenu="return false;"></div>
   <div id="boxContainer6" oncontextmenu="return false;"></div>
  </div>
  <script>
   var scatter1 = new Scatter(mainArr,{x: 'x', y: 'price', color: 'color', legend: 'left', width: 250, height: 250});
   scatter1.draw(1);
   eventTrigger(scatter1);
   var scatter2 = new Scatter(mainArr,{x: 'clarity', y: 'depth', color: 'depth', legend: 'right', width: 250, height: 250});
   scatter2.draw(2);
   eventTrigger(scatter2);
   var hist3 = new Hist(mainArr,{bin: 0.5, x: 'color', width: 250, height: 250});
   hist3.draw(3);
   eventTrigger(hist3);
   var hist4 = new Hist(mainArr,{bin: 0.5, x: 'x', width: 250, height: 250});
   hist4.draw(4);
   eventTrigger(hist4);
   var box5 = new Box(mainArr,{x: 'cut', y: 'price',  width: 300, height: 300});
    box5.draw(5);
    eventTrigger(box5);
    var box6 = new Box(mainArr,{x: 'carat', y: 'price',  width: 300, height: 300});
    box6.draw(6);
    eventTrigger(box6);
  </script>
  <script src="button_event.js"></script>
  <script src="table.js"></script>
  <div id="footer">
   <div class="wrap2">
    <p>Created by <a herf="#">RIGHT</a></p>
    <p>Copyright &copy; 2013 <a herf="#">RIGHT Team</a></p>
   </div>
  </div>
 </body>
</html>
